<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.css" rel="stylesheet" />
	</head>
	<body>

		<!-- 44444 -->
		<!-- 88888 -->
		<!-- 222222 -->
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">请选择房屋</h1>
		</header>

		<div class="mui-content">

			<div style="padding: 10px;color: black;" id="showRoom">
				<a id="cmty">恒大城 </a>
			</div>

			<ul class="mui-table-view" id="first">
			</ul>

			<ul class="mui-table-view" id="second" style="display: none;">
			</ul>

			<ul class="mui-table-view" id="third" style="display: none;">
			</ul>


		</div>
		<script src="../js/mui.js"></script>
		<script src="../js/jquery.min.js"></script>
		<script src="../js/req.js"></script>
		<script type="text/javascript">
			mui.init()

			var myroom = "";

			var mybuild = "";

			var mydanyuan = "";

			mui('#first').on('tap', '.mui-table-view-cell a', function() {
				console.log(this)
				console.log($(this).html().trim())
				mybuild = $(this).html().trim()
				mui.toast('bind')
				myroom += $(this).html().trim();

				$("#showRoom").html($("#showRoom").html() + " > " + '<a id="build"> ' + $(this).html().trim() + '</a>')

				mui.ajax(apiurl + 'api/roomList?type=unit&cmty=恒大城&build=' + mybuild, {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						"Authorization": localStorage.getItem("token")
						// "Authorization": localStorage.getItem("token")
					},
					success: function(data) {
						console.log(data)
						if (data.code == 200) {
							$("#second").html("")
							mui.each(data.data, function(index, element) {
								var ment =
									`
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right">
											${element.unit}
										</a>
									</li>
									`;
								$("#second").append(ment)
							})

							$("#first").hide()
							$("#second").show()
						}
					},
					error: function(xhr, type, errorThrown) {

					}
				});


			})
			mui('#second').on('tap', '.mui-table-view-cell a', function() {
				console.log(this)
				console.log($(this).html().trim())
				mydanyuan = $(this).html().trim()
				mui.toast('bind')
				myroom += $(this).html().trim();

				$("#showRoom").html($("#showRoom").html() + " > " + '<a id="build"> ' + $(this).html().trim() + '</a>')

				mui.ajax(apiurl + 'api/roomList?type=room&cmty=恒大城&build=' + mybuild + '&unit=' + mydanyuan, {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						"Authorization": localStorage.getItem("token")
						// "Authorization": localStorage.getItem("token")
					},
					success: function(data) {
						console.log(data)
						if (data.code == 200) {
							$("#third").html("")
							mui.each(data.data, function(index, element) {
								var ind =
									`
									<li class="mui-table-view-cell">
										<a class="mui-navigate-right" data-id="${element.id}">
											${element.room}
										</a>
									</li>
									`;
								$("#third").append(ind)
							})
							$("#second").hide()
							$("#third").show()
						}
					},
					error: function(xhr, type, errorThrown) {

					}
				});
			})

			mui('#third').on('tap', '.mui-table-view-cell a', function() {
				console.log($(this).html().trim())
				myroom += $(this).html().trim();

				var id = $(this).data("id")
				console.log(id);

				$("#showRoom").html($("#showRoom").html() + " > " + '<a id="build"> ' + $(this).html().trim() + '</a>')
				localStorage.setItem("room", myroom)
				localStorage.setItem("roomId", id)
				detailPage = plus.webview.getWebviewById('roomBind')
				mui.fire(detailPage, 'loadLocal', {});
				mui.back();
			})

			function getList() {
				mui.ajax(apiurl + 'api/roomList?type=build&cmty=恒大城', {
					dataType: 'json', //服务器返回json格式数据
					type: 'get', //HTTP请求类型
					timeout: 10000, //超时时间设置为10秒；
					headers: {
						"Authorization": localStorage.getItem("token")
						// "Authorization": 'ea902fb477a119bacacfahdabbbeaabj8f0c13'
					},
					success: function(data) {
						console.log(data)
						if (data.code == 200) {
							$("#first").html("")
							mui.each(data.data, function(index, element) {
								var ele =
									`
								<li class="mui-table-view-cell">
									<a class="mui-navigate-right">
										${element.building}
									</a>
								</li>
								`;
								$("#first").append(ele)
							})
						}
					},
					error: function(xhr, type, errorThrown) {

					}
				});
			}



			mui.ready(function() {
				getList()
			})
		</script>
	</body>

</html>